<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>闲优购-注册页面</title>
	<link rel="icon" href="img/weblogo.png" >
	<link rel="stylesheet" type="text/css" href="bootstrap-5.1.3-dist/css/bootstrap.min.css"/>
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css">
	<script type="text/javascript" src="js/jquery-3.6.0-min.js"></script>
	<script type="text/javascript" src="bootstrap-5.1.3-dist/js/bootstrap.min.js"></script>
	<script type="text/javascript" src="js/register.js"></script>
</head>
<body>
		<div class="container" style="margin-top: 10%;">
			<div class="col-md-6 offset-md-3 order-md-3 shadow bg-light">
				<div class="container">
				<div class="text-center">
					<img src="img/logo.jpg" style="width: auto; height: 200px">
				</div>
				<div>
					<h5 class="text-center">
						<i class="bi bi-person-fill"></i>
						注册页面
					</h5>
				</div>
				<div>
				<form id="reg_form" class="text-center" action="/toRegister">
					<div class="row">
						<ul style="list-style-type: none;">
							<li class="row p-1">
								<label class="col-md-3 offset-md-2" for="username">用户名:</label>
								<input class="col-md-5" type="text" name="username" id="username" >
								<span></span>
							</li>
							<li class="row p-1">
								<label class="col-md-3 offset-md-2" for="password">密码:</label>
								<input class="col-md-5" type="password" name="password" id="password">
								<span></span>
							</li>
							<li class="row p-1">
								<label class="col-md-3 offset-md-2" for="cpassword">确认密码:</label>
								<input class="col-md-5" type="password" name="cpassowrd" id="cpassword">
								<span></span>	
							</li>
							<li class="row p-1">
								<label class="col-md-3 offset-md-2" for="phone">联系方式:</label>
								<input class="col-md-5" type="text" name="phone" id="phone">
								<span></span>
							</li>
						</ul>
					</div>


					<div class="row mx-auto">
						<div class="mx-auto">
							<button id="btn-register" type="button" class="btn btn-dark w-25 mb-4 mx-4">
								注册
							</button>
							<button type="button" class="btn btn-dark w-25 mb-4 mx-4">
								<a href="login.jsp" style="text-decoration: none; color: white; display: block">去登陆</a>
							</button>
						</div>
					</div>
				</form>
			</div>
			</div>
			</div>
		</div>
		<button id="btn-modal-error" type="button" class="btn btn-success" data-bs-toggle="modal" data-bs-target="#modal-error" hidden></button>
		<button id="btn-modal-success" type="button" class="btn btn-success" data-bs-toggle="modal" data-bs-target="#modal-success" hidden></button>

		<!-- 错误信息 提示框 -->

		<div class="modal fade" id="modal-error" tabindex="-1" aria-labelledby="modal-error" aria-hidden="true">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<h5 class="modal-title text-danger">
							<i class="bi bi-exclamation-triangle-fill"></i>
							温馨提示
						</h5>
						<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
					</div>
					<div class="modal-body">
						<h5 class="text-warning text-center">
							<i class="bi bi-x-circle"></i>
							<span id="modal-error-info"></span>
						</h5>
					</div>
				</div>
			</div>
		</div>

		<!-- 成功信息 提示框 -->
		<div class="modal fade" id="modal-success" tabindex="-1" aria-labelledby="modal-success" aria-hidden="true">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<h5 class="modal-title text-danger">
							<i class="bi bi-exclamation-triangle-fill"></i>
							温馨提示
						</h5>
						<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
					</div>
					<div class="modal-body">
						<h5 id="modal-success-info" class="display-5 text-success text-center">
							购买成功!
							<i class="bi bi-check-circle"></i>
						</h5>
					</div>
				</div>
			</div>
		</div>
	<div class="position-absolute top-100 start-50 translate-middle">
		<p>CopyRight © 2021-2022 uni科技有限公司 </p>
	</div>
	
</body>
</html>